<template>
  <view class="seeInvoice">
    <view class="beween" v-for="(item, index) in status" :key="index">
      {{item.name}}
      <text style="color: #FF5533">{{inVoiceStatus[invoiceObj[item.key]]}}</text>
    </view>
    <view class="title">发票信息</view>
    <view class="beween" v-for="(item, index) in invoiceInfo" :key="index">
      {{item.name}}
      <text>{{invoiceObj[item.key]}}</text>
    </view>
    <view class="title">发票邮寄信息</view>
    <view class="beween" v-for="(item, index) in userInfo" :key="index">
      {{item.name}}
      <text>{{invoiceObj[item.key]}}</text>
    </view>
  </view>
</template>

<script>
import { invoiceSee } from '@/api/orderApi';

export default {
  data() {
    return {
      status: [
        { name: '发票状态', key: 'invoice_status' }
      ],
      invoiceInfo: [
        { name: '发票类型', key: 'invoice_type_text' },
        { name: '发票抬头', key: 'invoice_title' },
        // { name: '发票内容', key: '纸质普通发票' },
        // { name: '发票金额', key: '纸质普通发票' },
        { name: '开票时间', key: 'create_date' },
      ],
      userInfo: [
        { name: '收件人', key: 'received_name' },
        { name: '联系电话', key: 'received_phone' },
        { name: '收件地址', key: 'detail_address' }
      ],
      invoiceObj: {},
      inVoiceStatus: {
        '10': '待开',
        '20': '开票中',
        '30': '部分开',
        '40': '已开',
        '50': '已发',
        '60': '下单带票'
      }
    }
  },
  mounted() {

  },
  methods: {
    async invoiceSee(order_id) {
      const { memberId } = this.vuex_memberInfo
      const params = {
        order_id,
        member_id: memberId,
      }
      const res = await invoiceSee(params)
      const { received_name, received_phone, detail_address, create_date, invoice_status, invoice_title, invoice_type,  } = res.data
      this.invoiceObj = {
        received_name,
        received_phone,
        detail_address,
        create_date,
        invoice_status,
        invoice_title,
        invoice_type,
        invoice_type_text: invoice_type == 10 ? '增值税' : invoice_type == 20 ? '普税' : ''
      }
    }
  },
  onLoad(option) {
    this.invoiceSee(option.id)
  }
}
</script>

<style scoped lang="scss">
page {
  background: #F5F5F5;
}
.title {
  padding: 32rpx 32rpx 16rpx 32rpx;
  box-sizing: border-box;
  color: #999999;
  font-size: 24rpx;
}
.seeInvoice {
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  .beween {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 28rpx 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    color: #222222;
    font-size: 28rpx;
    font-weight: 500;
    border-bottom: 1rpx solid #F5F5F5;
    text {
      display: block;
      max-width: 72%;
      font-weight: 400;
    }
  }
}
</style>